<!-- extends表明此页面继承自 base.html 文件 -->
{% extends "base.html" %}
{% load static %}

<!-- 写入 base.html 中定义的 title -->
{% block title %}
文章详情
{% endblock title %}

<!-- 写入 base.html 中定义的 content -->
{% block content %}
<!-- 文章详情 -->
<div class="container">
    <div class="row">
        <!-- 标题及作者 -->
        <h1 class="col-12 mt-4 mb-4">{{ article.title }}</h1>
        <div class="col-12 alert alert-primary">
            <a>作者：{{ article.author }}</a>
            <a>{{ article.created|date:'Y-m-d H:i:s' }}</a>
            <!-- 只有作者可以修改文章 -->
            {% if user == article.author %}
            · <a href="#" data-toggle="modal" data-target="#myModal">删除文章</a>
            · <a href="{% url "article:article_update" article.id %}">编辑文章</a>
            {% endif %}
            <small class="col align-self-end" style="color: gray;">
                            <span class="bi bi-eye">
                            {{ article.total_views }}
                            </span>
            </small>
        </div>
        <!-- 文章正文 -->
        <div class="col-12">
            <p>{{ article.body }}</p>
        </div>
    </div>
</div>

    <div class="container">
        <div class="col-12">
    <!-- 发表评论 -->
    <hr>
    {% if user.is_authenticated %}
    <div>
        <form
                action="{% url 'comment:post_comment' article.id %}"
                method="POST"
        >
            {% csrf_token %}
            <div class="form-group">
                <label for="body">
                    <strong>
                        我也要发言：
                    </strong>
                </label>
                <textarea
                        type="text"
                        class="form-control"
                        id="body"
                        name="body"
                        rows="2">
                </textarea>
            </div>
            <!-- 提交按钮 -->
            <button type="submit" class="btn btn-primary ">发送</button>
        </form>
    </div>
    <br>
    {% else %}
    <br>
    <h5 class="row justify-content-center">
        请<a href="{% url 'userprofile:login' %}">登录</a>后回复
    </h5>
    <br>
    {% endif %}
        </div>
    </div>

<div class="container">
    <div class="col-12">
<!-- 显示评论 -->
<h5>共有{{ comments.count }}条评论</h5>
<div >
    {% for comment in comments %}
    <hr>
    <p>
<!--        <strong style="color: pink">-->
        <span class="bi bi-person" style="color: blue">
            {{ comment.user }}
        </span>
        <!--        </strong> -->
        于
        <span style="color: green">
                    {{ comment.created|date:"Y-m-d H:i:s" }}
                </span> 时说：
    </p>
    <pre style="font-family: inherit; font-size: 1em;">
{{ comment.body }}</pre>
    {% endfor %}
</div>
</div>


<!-- 模态框 -->
<div class="modal fade " id="myModal">
    <div class="modal-dialog modal-dialog-centered modal-sm">
        <div class="modal-content">
            <!-- 模态框头部 -->
            <div class="modal-header">
                <h4 class="modal-title">确认删除</h4>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>
            <!-- 模态框主体 -->
            <div class="modal-body">
                确认删除文章？
            </div>
            <!-- 模态框底部 -->
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" data-dismiss="modal"
                        onclick="confirm_delete()">
                确定
                </button>
            </div>
        </div>
    </div>
</div>
<script>
    // 删除文章的函数
    function confirm_delete() {
             location.href='{% url "article:article_delete" article.id %}'
    }
</script>

{% endblock content %}